<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-button type="primary" @click="clickCreat">添加banner</el-button>
      </el-col>
    </el-row>

    <el-table align="center" :data="list.list" border style="width: 100%; margin: 20px 0">
      <el-table-column align="center" label="封面图">
        <template slot-scope="scope">
          <div style="position: relative; width: 100%; padding-top: 56%">
            <img :src="scope.row.tpic" alt="" style="
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
              " />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="href" label="链接">
      </el-table-column>
      <el-table-column align="center" prop="myorder" label="排序">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button class="editText" @click="clickEdit(scope.row.id)" type="text">修改</el-button>
          <el-button class="deletText" @click="deletUser(scope.row.id)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @current-change="handleCurrentChange" :current-page="list.page" :page-size="list.size"
        layout="total, prev, pager, next, jumper" :total="parseInt(list.count)" align="left"></el-pagination>
    </div>
    <el-dialog title="小程序banner管理" :visible.sync="dialogVisible" width="50%" top="10.8vh" :close-on-click-modal="false"
      :before-close="handleClose">
      <div class="mini">
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">小程序封面图</p>
          <div class="left_w s_flex s_align_items">
            <div style="margin-right: 20px">
              <el-upload class="upload-demo" :on-success="onSuccess" :show-file-list="false"
                :action="`${VUE_APP_BASE_API}/v1/index/upload `">
                <el-button type="primary">上传封面图</el-button>
              </el-upload>
            </div>
            <el-button v-if="form.tpic" @click="form.tpic = ''" type="danger">删除</el-button>
          </div>
        </div>
        <div class="news_mrt" v-if="form.tpic">
          <img style="width: 15%" :src="form.tpic" />
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">链接</p>
          <div class="left_w">
            <el-input v-model="form.href" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input v-model="form.myorder" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import {
  appletList,
  appletAdd,
  appletDel,
  appletInfo,
  appletEdit
} from "@/api/adminWeb";
export default {
  data() {
    return {
      VUE_APP_BASE_API,
      list: [],
      dialogVisible: false,
      form: {
        banner_id: "",
        title: "",
        type: "",
        tpic: "",
        search: "",
        myorder: "",
      },
      options: [
        //   1.新闻资讯、2.中心活动、3.双家工程、4.海外维权、5.顺德智造、6.顺德荣誉
        {
          value: "1",
          label: "新闻资讯",
        },
        {
          value: "2",
          label: "中心活动",
        },
        {
          value: "3",
          label: "双家工程",
        },
        {
          value: "4",
          label: "海外维权",
        },
        {
          value: "5",
          label: "顺德智造",
        },
        {
          value: "6",
          label: "顺德荣誉",
        },
      ],
      contentDesc: "",
      clearDesc: 0,
      fileList: [],
    };
  },
  components: {
    // Editor,
  },
  mounted() {
    this.getLIst();
  },
  methods: {
    searchVal() {
      this.getLIst();
    },
    clickCreat() {
      this.dialogVisible = true;
    },
    handeChange(val) {
      this.form.type = val;
    },
    async clickEdit(id) {
      try {
        this.form = await appletInfo({
          banner_id: id,
        });
        this.contentDesc = this.form.content;
        this.dialogVisible = true;
        // this.form.type = this.form.from.toString();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    deletUser(id) {
      this.$confirm("此操作将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await appletDel({
              banner_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clear() {
      this.getLIst();
    },
    handleClose() {
      this.dialogVisible = false;
      this.form = {
        title: "",
        type: "",
        tpic: "",
        myorder: "",
      };
    },
    async onSuccess(response, file, fileList) {
      if (response) {
        // console.log(response.data.url);
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async getLIst() {
      try {
        this.list = await appletList();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async save() {
      try {
        const { tpic, href, myorder } = this.form;
        if (this.form.id) {
          console.log(this.form.id);
          await appletEdit({
            banner_id: this.form.id,
            tpic,
            href,
            myorder,
          });
          this.getLIst();
          this.$message.success("修改成功");
          this.dialogVisible = false;
        } else {
          await appletAdd({
            tpic,
            href,
            myorder,
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;

          this.form = {
            title: "",
            type: "",
            tpic: "",
            myorder: "",
          };
        }

      } catch (error) {
        this.$message.error(error.message);
      }
    },
    cancle() {
      this.dialogVisible = false;

      this.form = {
        title: "",
        type: "",
        tpic: "",
        myorder: "",
      };
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const resUser = await appletList({
          page: currentPage,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mini {
  height: 69.5vh;
}

.news_mrt {
  margin-bottom: 30px;
}

.left_w {
  width: 80%;
}
</style>